<template>
    <el-form class="login-form"
             status-icon
             :rules="loginRules"
             ref="loginForm"
             :model="loginForm"
             label-width="0">
        <!-- 手机号 -->
        <el-form-item prop="phone">
            <el-input size="small"
                      @keyup.enter.native="handleLogin"
                      v-model="loginForm.phone"
                      auto-complete="off"
                      :placeholder="$t('login.phone')">
                <i slot="prefix"
                   class="icon-shouji"></i>
            </el-input>
        </el-form-item>

        <!-- 验证码 -->
        <el-form-item prop="code">
            <el-input size="small"
                      @keyup.enter.native="handleLogin"
                      v-model="loginForm.code"
                      auto-complete="off"
                      :placeholder="$t('login.code')">
                <i slot="prefix"
                   class="icon-yanzhengma"
                   style="margin-top:6px;"></i>
                <!-- 发送验证码 -->
                <template slot="append">
          <span @click="handleSend"
                class="msg-text"
                :class="[{display:msgKey}]">{{ msgText }}</span>
                </template>
            </el-input>
        </el-form-item>

        <el-form-item>
            <el-button size="small"
                       type="primary"
                       @click.native.prevent="handleLogin"
                       class="login-submit">{{ $t('login.submit') }}
            </el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import {isvalidatemobile} from "@/util/validate";
import crud from "@/util/crud";
import {mapGetters} from "vuex";

export default {
    name: "codelogin",
    data() {
        const validatePhone = (rule, value, callback) => {
            if (isvalidatemobile(value)[0]) {
                callback(new Error(isvalidatemobile(value)[1]));
            } else {
                callback();
            }
        };
        const validateCode = (rule, value, callback) => {
            if (value.length != 6) {
                callback(new Error("请输入6位数的验证码"));
            } else {
                callback();
            }
        };
        return {
            msgText: "",
            msgTime: "",
            msgKey: false,
            loginForm: {
                phone: "",
                code: ""
            },
            loginRules: {
                phone: [{required: true, trigger: "blur", validator: validatePhone}],
                code: [{required: true, trigger: "blur", validator: validateCode}]
            }
        };
    },
    created() {
        this.msgText = this.config.MSGINIT;
        this.msgTime = this.config.MSGTIME;
    },
    mounted() {
    },
    computed: {
        ...mapGetters(["tagWel"]),
        config() {
            return {
                MSGINIT: this.$t("login.msgText"),
                MSGSCUCCESS: this.$t("login.msgSuccess"),
                MSGTIME: 60
            };
        }
    },
    props: [],
    methods: {
        // 发送验证码, 并进入60倒计时
        handleSend() {
            this.$message.warning('注意: 手机号登录需自行对接, 这里不会真正的发送短信');
            if (this.msgKey) return;
            // 发送验证码
            // crud.post("/api/admin/sms/sendCode", null, {phone: this.loginForm.phone, type: "BTP_LOGIN"})
            this.msgText = this.msgTime + this.config.MSGSCUCCESS;
            this.msgKey = true;
            const time = setInterval(() => {
                this.msgTime--;
                this.msgText = this.msgTime + this.config.MSGSCUCCESS;
                if (this.msgTime == 0) {
                    this.msgTime = this.config.MSGTIME;
                    this.msgText = this.config.MSGINIT;
                    this.msgKey = false;
                    clearInterval(time);
                }
            }, 1000);
        },
        // 登录
        handleLogin() {
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    this.$store.dispatch("LoginByPhone", this.loginForm).then(() => {
                        this.$router.push({path: this.tagWel.value});
                    });
                }
            });
        }
    }
};
</script>

<style>
.msg-text {
    display: block;
    width: 60px;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
}

.msg-text.display {
    color: #ccc;
}
</style>
